<template>
    <van-nav-bar
    :title="title"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
    >
    <template #right>
        <van-icon name="search" size="18" />
    </template>
    </van-nav-bar>

    <div id="content">
        <router-view />
    </div>

    <van-tabbar route @change="onChange" placeholder="true">
        <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
        <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
        <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
    </van-tabbar>
</template>
  
<script setup>
import { ref } from 'vue';
import { Toast } from 'vant';
import { useRoute, useRouter } from 'vue-router';
import routes from '../config/route';

    const router = useRouter();
    const DEFAULT_TITLE = '趣友共鸣';
    const title = ref(DEFAULT_TITLE);
    const onClickLeft = () => (
        router.back()
    );
    const onClickRight = () => (
        router.push('/search')
    ); 

    // const active = ref("index");
    // const onChange = (index) => Toast(`标签 ${index}`);

    router.beforeEach((to, from) => {
        const toPath = to.path;
        const route = routes.find((route) => {
            return toPath == route.path;
        })
        title.value = route?.title ?? DEFAULT_TITLE;
    })
</script>

<style scoped>

</style>